<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_WATER_PID_TOOLTIP_CONTROL_VALUE"
});
import { onMounted, computed, ref } from "vue";
import { useRoute } from "vue-router";
import { queryEqpById } from "@/api/equip/archive";

// http://localhost:9527/fullScreen/water/water/topology/controlValue?eqpId=CIW10

const loading = ref(false);

const queryData = ref<any>({});

const imgUrl = computed(() => {
  return queryData.value && queryData.value.pictureList && queryData.value.pictureList.length ? queryData.value.pictureList[0].fileUrl : "";
});

const imgUrlList = computed(() => {
  return queryData.value && queryData.value.pictureList && queryData.value.pictureList.length ? queryData.value.pictureList.map(e => e.fileUrl) : [];
});

const queryDataList = ref<any>({
  systemName: "子系统",
  categoryName: "设备总称",
  typeName: "设备类型",
  modelName: "设备型号",
  eqpId: "设备编号",
  positionNameAll: "设备位置",
  principalName: "负责人",
  manufacturer: "设备厂家",
  manufactureDate: "出厂日期",
  warrantyEndDate: "质保结束日期"
});

const getValue = item => {
  const ind = Object.keys(queryDataList.value).findIndex(e => queryDataList.value[e] === item);
  return Object.keys(queryDataList.value)[ind];
};

const init = async () => {
  loading.value = true;
  const {
    query: { eqpId: eqpId_ = "" }
  } = useRoute();
  if (!eqpId_) return;
  const params = { eqpId: eqpId_ };
  const res = await queryEqpById(params).catch(error => {
    loading.value = false;
  });
  loading.value = false;
  if (!res) return;
  queryData.value = res;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div v-loading="loading" class="topology-container">
    <div class="topology-con">
      <div class="topology-con-img">
        <px-image class="img" style="width: 100%; height: 100%" :src="imgUrl" :zoom-rate="1.2" :preview-src-list="imgUrlList" fit="cover">
          <template #error>
            <px-empty :image-size="100" />
          </template>
        </px-image>
      </div>
      <div class="topology-con-msg">
        <div class="topology-con-msgList">
          <div>系统:</div>
          <div>给排水系统</div>
        </div>
        <div v-for="item in queryDataList" :key="item" class="topology-con-msgList">
          <div>{{ item }}:</div>
          <div>{{ queryData[getValue(item)] || "-" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topology-container {
  width: 100%;
  height: 100%;
  padding: 16px;

  .topology-con {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;

    .topology-con-img {
      flex: 1;
      border: 1px solid #ccc;

      .img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }

    .topology-con-msg {
      display: flex;
      flex-flow: column wrap;
      gap: 8px;
      width: 280px;
      height: 100%;

      .topology-con-msgList {
        display: flex;
        flex-flow: row nowrap;
        gap: 16px;
      }
    }
  }
}
</style>
